<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link rel="stylesheet"
	href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>

<style>
#feedback {
	font-size: 1.4em;
}

#selectable .ui-selecting {
	background: #FECA40;
}

#selectable .ui-selected {
	background: #F39814;
	color: white;
}

#selectable {
	list-style-type: none;
	margin: 0;
	padding: 0;
	width: 60%;
	text-align: center;
}

#selectable li {
	margin: 3px;
	padding: 0.4em;
	font-size: 100%;
	height: 18px;
	text-align: center;
}

div#left {
	float: left;
	width: 15%;
	border:2px solid;
	border-radius:10px;
	position:relative;
}

div#right {
	float: left;
	width: 80%;	
	height: 300px;
	border:2px solid;
	border-radius:10px;
	position: relative;
}

div#below {
	float: right;
	width: 75%;
	clear: both;
	border:2px solid;
	border-radius:25px;
}

#jimimg {
	max-width: 100%;
}

div.soundStuff canvas {
	width:100%;
	height:100%;
	position:absolute;
}

</style>
<script>
	var origImg;
	var endTime = $("audio#mraudio")[0].duration;
	var startTime = 0;
	$("audio#mraudio")[0].addEventListener("timeupdate", function() {
		if (this.currentTime >= endTime) {
			console.log("current time " + this.currentTime + ", endtime " + endTime);
			this.pause();
		}
	});
	var beginningSelect = -1;
	$("#selectable li").click(
			function() {
				$(this).addClass("ui-selected").siblings().removeClass(
						"ui-selected");
				var blah = $("div#right");
				var temp = "upload/audio/" + $(this).text() + ".png]";
				origImg = new Image();
				$("audio#mraudio").attr("src", "http://127.0.0.1:8081/jimsound/upload/audio/"
						+ $(this).text());
				endTime = $("audio#mraudio")[0].duration;
				var canvas = $("canvas#soundCanvasMain")[0];
				var context = canvas.getContext('2d');
				origImg.onload = function () {
					var canvasSelectLine = $("canvas#soundCanvasSelectLine")[0];
					var contextSelectLine = canvasSelectLine.getContext('2d');
					var canvasSelected = $("canvas#soundCanvasSelected")[0];
					var contextSelected = canvasSelected.getContext('2d');
					var canvasPlayLine = $("canvas#soundCanvasPlayLine")[0];
					var contextPlayLine = canvasPlayLine.getContext('2d');
					canvas.addEventListener('mousemove', function(evt) {
						var rect = canvasSelectLine.getBoundingClientRect();
						var xPos = evt.clientX - rect.left;
						console.log("xpos " + xPos);
						var selTime = $("audio#mraudio")[0].duration * xPos/canvasSelectLine.width;
						contextSelectLine.clearRect(0, 0, canvasSelectLine.width, canvasSelectLine.height);
						contextSelectLine.beginPath();
						contextSelectLine.moveTo(xPos, 0);
						contextSelectLine.lineTo(xPos, canvasSelectLine.height);
						contextSelectLine.strokeStyle = '#777777';
						contextSelectLine.stroke();
						contextSelectLine.fillStyle = "#78AB46";
						contextSelectLine.font = "bold 16px Arial";
						contextSelectLine.fillText(selTime.toFixed(3), 0, 500);
						if (beginningSelect > 0) {
							contextSelected.clearRect(0, 0, canvasSelected.width, canvasSelected.height);
							contextSelected.fillStyle = "rgba(65,105,225, 0.25)";
							contextSelected.fillRect(beginningSelect, 0, xPos-beginningSelect, canvasSelected.height);
							endTime = selTime;
						}
					});
					canvas.addEventListener('mousedown', function(evt) {
						var rect = canvasSelectLine.getBoundingClientRect();
						var xPos = evt.clientX - rect.left;
						beginningSelect = xPos;
						startTime = $("audio#mraudio")[0].duration * xPos/canvasSelectLine.width;
						contextSelected.clearRect(0, 0, canvasSelected.width, canvasSelected.height);
					});
					canvas.addEventListener('mouseup', function(evt) {
						var rect = canvasSelectLine.getBoundingClientRect();
						if (beginningSelect == evt.clientX - rect.left) {
							endTime = $("audio#mraudio")[0].duration;
							startTime = 0;
						}
						beginningSelect = -1;
					});
					canvas.width = canvas.clientWidth;
					canvas.height = canvas.clientHeight;
					context.drawImage(origImg, 0, 0, canvas.width, canvas.height);
					contextSelectLine.fillStyle = "#78AB46";
					contextSelectLine.font = "bold 16px Arial";
					contextSelectLine.fillText("0.000", 0, 500);
					canvasSelectLine.width = canvasSelectLine.clientWidth;
					canvasSelectLine.height = canvasSelectLine.clientHeight;
					canvasPlayLine.width = canvasPlayLine.clientWidth;
					canvasPlayLine.height = canvasPlayLine.clientHeight;
					canvasSelected.width = canvasSelected.clientWidth;
					canvasSelected.height = canvasSelected.clientHeight;
					console.log("canvas width " + canvas.width + " height " + canvas.height);
					console.log("style width " + canvas.style.width + " height " + canvas.style.height);
				};
				origImg.src = "http://127.0.0.1:8081/jimsound/upload/audio/"
					+ $(this).text() + ".png";
			});
</script>
<script>
	$("#selectable2 li").click(
			function() {
				$(this).addClass("ui-selected").siblings().removeClass(
						"ui-selected");
				$("audio#mraudio")[0].currentTime = startTime;
				console.log("start time:" + startTime);
				$("audio#mraudio")[0].play();
				setTimeout(updateTime, 100);
			});
	function updateTime() {
		var blah = $("audio#mraudio");
		var canvasPlayLine = $("canvas#soundCanvasPlayLine")[0];
		var contextPlayLine = canvasPlayLine.getContext('2d');
		contextPlayLine.clearRect(0, 0, canvasPlayLine.width, canvasPlayLine.height);
		if (blah[0].paused) {
			contextPlayLine.beginPath();
			contextPlayLine.moveTo(0, 0);
			contextPlayLine.lineTo(0, canvasPlayLine.height);
			contextPlayLine.strokeStyle = '#000000';
			contextPlayLine.stroke();
			contextPlayLine.fillStyle = "#78AB46";
			contextPlayLine.font = "bold 16px Arial";
			contextPlayLine.fillText("0.000", 650, 500);
		} else {
			setTimeout(updateTime, 100);					
			var xPos = (blah[0].currentTime/blah[0].duration) * canvasPlayLine.width;
			contextPlayLine.beginPath();
			contextPlayLine.moveTo(xPos, 0);
			contextPlayLine.lineTo(xPos, canvasPlayLine.height);
			contextPlayLine.strokeStyle = '#000000';
			contextPlayLine.stroke();
			contextPlayLine.fillStyle = "#78AB46";
			contextPlayLine.font = "bold 16px Arial";
			contextPlayLine.fillText(blah[0].currentTime.toFixed(3), 650, 500);
		}
	}
</script>
</head>

<body>
	<audio id="mraudio"></audio>
	<div>
		<div id="left" align="center">
			<c:forEach var="file" items="${fileList}">
				<button class="ui-widget-content">${file.fileName}</button>
			</c:forEach>
		</div>
		<div id="right" class="soundStuff">
			<canvas id="soundCanvasMain" style="z-index: 0"></canvas>
			<canvas id="soundCanvasSelected" style="z-index: 1"></canvas>
			<canvas id="soundCanvasPlayLine" style="z-index: 2"></canvas>
			<canvas id="soundCanvasSelectLine" style="z-index: 3"></canvas>
		</div>
		<div id="below">
			<ol id="selectable2">
				<li class="ui-widget-content">PLAY</li>
			</ol>
		</div>
	</div>
</body>
</html>